<template>
	<div ref="fullscreenElement">
		<!-- <cardErrorhead></cardErrorhead> -->
		<div class="header">
			<h3>处理异常答题卡</h3>
			<carderrorHead></carderrorHead>
			<!-- <div class="routerlistbox">
				<router-link :to="`/homeabnormalexamnumber?subjectid=${$route.query.subjectid}&examid=${$route.query.examid}&examtitle=${$route.query.examtitle}&sujectname=${$route.query.sujectname}`" active-class="hover">答题卡异常</router-link>
				<router-link :to="`/homeoptionexception?subjectid=${$route.query.subjectid}&examid=${$route.query.examid}&examtitle=${$route.query.examtitle}&sujectname=${$route.query.sujectname}`" active-class="hover">填涂异常</router-link>
				<router-link :to="`/homeabnormalrating?subjectid=${$route.query.subjectid}&examid=${$route.query.examid}&examtitle=${$route.query.examtitle}&sujectname=${$route.query.sujectname}`" active-class="hover">打分异常</router-link>
			</div> -->
			<p>
				<b @click="toggleFullscreen"><img src="../../assets/image/school/qp.png" alt="">{{ isFullscreen ? "退出全屏"
					: "全屏(F11)" }}</b>
				<em @click="quiteboxclick">退出</em>
			</p>
		</div>
		<div class="cropperBox">
			<div class="cropperImageset" ref="scrollContainer">
				<div class="cardczpk" ref="draggableBox" :style="{
					left: `${position.x}px`,
					top: `${position.y}px`,
				}" @mousedown="startDrag" @touchstart.prevent="startDrag">
					<span>答题卡操作</span>
					<div>
						<i @click="roateclick">旋转</i>
						<b @click="cardabsore = true">排序</b>
					</div>
				</div>
				<div v-loading="loading" element-loading-text="图片加载中..." element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)">
					<canvas ref="canvas"></canvas>
				</div>
				<ul class="pagesetfixed">
					<li v-for="(item, index) in imageUrllist" :class="index == tabindex ? 'hover' : ''"
						@click="pageimageclick(index)">{{ index + 1 }}</li>
				</ul>
			</div>
			<div class="uploadcardInfo" ref="unloadishowscorrel">
				<h3>异常列表({{ questionlist.length }})</h3>
				<div class="yclbtitle">
					<div class="yclbtitleLeft" :style="screenWidth > 1400 ? 'margin-bottom:0' : 'margin-bottom:5px'">
						<el-select v-model="batchNo" placeholder="批次号" clearable @keyup.enter.native="searchboxinfo">
							<el-option v-for="item in batchNoList" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
						<el-input clearable placeholder="流水号" v-model="serialNo" style="margin-right:5px;"
							@keyup.enter.native="searchboxinfo"></el-input>
						<el-input clearable placeholder="准考证号" v-model="examNumber" style="margin-right:5px;"
							@keyup.enter.native="searchboxinfo"></el-input>
						<el-input clearable placeholder="考生姓名" v-model="studentName" style="margin-right:5px;"
							@keyup.enter.native="searchboxinfo"></el-input>
						<el-button @click="searchboxinfo">搜索</el-button>
					</div>
					<div class="yclbtitleRight">
						<el-button @click="translatedata">刷新</el-button>
						<el-button @click="dacdeletmore">批量删除</el-button>
						<el-button @click="mandatoryidentification">强制识别</el-button>
						<el-button @click="batchrecognition">批量识别</el-button>
					</div>
				</div>
				<!-- 表格 -->
				<div style="padding:0 14px;position: relative;" ref="scrollContainercontent">
					<el-table ref="multipleTable" :data="questionlist"
						:style="{ width: (questionlist.length > 0 ? (questionlist[0].objectiveAnswers.length * 106 * 5) + 'px' : '100%') }"
						:height="tableheightbox" class="custom-table" @row-click="handleRowClick"
						@selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" />
						<el-table-column prop="batchNumber" label="批次号" width="80" />
						<el-table-column prop="serialNumber" label="流水号" width="80" />
						<el-table-column prop="examNumber" label="考号" width="120" />
						<el-table-column prop="examName" label="姓名" width="100" />
						<el-table-column width="120"
							v-for="(chil, colIndex) in questionlist.length > 0 ? questionlist[0].objectiveAnswers : []"
							:key="colIndex"
							:label="chil.smallQuestionNumber == 0 ? chil.questionRuleName + chil.questionNumber : chil.questionNumber + '-' + chil.questionRuleName + chil.smallQuestionNumber">
							<template #default="{ row, $index }">
								<div style="position:relative" :ref="`question-${$index}-${colIndex}`">
									<!-- :data-questionId="" -->
									<b @click="handleCellClick($index, colIndex)" style="position:relative">
										<i :class="!row.objectiveAnswers[colIndex].isCheck ? 'boxihover' : ''"
											:data-colIndex="colIndex" :data-index="$index"
											style="position:absolute;left:0;top:0;display: block;width:100%;height:97%;z-index:111;"></i>
										<el-input v-if="!row.objectiveAnswers[colIndex].isCheck"
											v-model="row.objectiveAnswers[colIndex].option"></el-input>
										{{ row.objectiveAnswers[colIndex].option }}
									</b>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<!-- 弹窗 -->
					<div class="answerbox" ref="answerBox"
						:style="{ left: addanswerLeft + 'px', top: addanswerTop + 'px' }"
						v-show="answerIsShow && questionlist.length > 0 && questionlist[rowindex] && questionlist[rowindex].objectiveAnswers && questionlist[rowindex].objectiveAnswers[colindex]">
						<em class="el-icon-close"
							style="position:absolute;right:8px;top:10px;font-style:normal;cursor: pointer;"
							@click="closermessage"></em>
						<h4 style="padding-top:15px;">
							请选择答题卡中的选项{{
								questionlist && questionlist[rowindex] && questionlist[rowindex].objectiveAnswers &&
									questionlist[rowindex].objectiveAnswers[colindex] ?
									(questionlist[rowindex].objectiveAnswers[colindex].smallQuestionNumber === 0
										?
										`${questionlist[rowindex].objectiveAnswers[colindex].questionRuleName}${questionlist[rowindex].objectiveAnswers[colindex].questionNumber}`
										:
										`${questionlist[rowindex].objectiveAnswers[colindex].questionNumber}-${questionlist[rowindex].objectiveAnswers[colindex].questionRuleName}${questionlist[rowindex].objectiveAnswers[colindex].smallQuestionNumber}`)
									: ''
							}}
						</h4>
						<p>
							<template
								v-if="questionlist[rowindex] && questionlist[rowindex].objectiveAnswers && questionlist[rowindex].objectiveAnswers[colindex]">
								<i v-for="item in getAnswerList(questionlist[rowindex].objectiveAnswers[colindex])"
									:key="item" @click="selectAnswer(item)">
									{{ item }}
								</i>
							</template>
						</p>
						<div>
							<span @click="showPrevious">上一个</span>
							<span @click="showNext">下一个</span>
							<!-- <b @click="showNextLine">整条提交</b> -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 排序 -->
		<div class="uploadcadContent" v-if="cardabsore">
			<div class="uploadcad">
				<h3>答题卡操作-排序</h3>
				<draggable v-if="imageUrllist.length > 0" :list="imageUrllist" :animation="100" :forceFallback="true"
					@end="onEnd" @change="onMoveCallback" class="imgmove">
					<transition-group>
						<div v-for="(item, index) in imageUrllist" :key="item.id" class="boxsetdelecte"
							v-if="imageUrllist.length > 0">
							<b>{{ index + 1 }}</b>
							<img :src="item.filePath" alt="" style="width:200px;border: 1px solid #295cff80;">
							<span><img src="../../assets/image/school/drag.png" alt=""
									style="width:24px;height:24px;"></span>
							<div class="buttonboxedit">
								<i @click="showViewer(index)">查看</i>
							</div>
						</div>
					</transition-group>
				</draggable>
				<div class="buttonreupload" style="margin-top:20px;">
					<button @click="surepxlist">保存</button>
					<b @click="cardabsore = false">返回</b>
				</div>
			</div>
		</div>
		<viewer class="viewer" ref="viewer" :images="imageUrllist" :shown="viewerVisible" @inited="viewerInited">
			<template #default="{ images }">
				<img v-for="(image, index) in images" :key="index" :src="image.filePath" style="display: none;">
			</template>
		</viewer>
		<!-- 批量识别答题卡 -->
		<div class="addExamMain" v-if="batchrecognitionishow">
			<div class="addExamContent">
				<h3>批量识别答题卡</h3>
				<p>批量识别将覆盖现有识别记录，请选择以下重新批量识别选项</p>
				<div class="sbcontentbsl">
					<el-checkbox v-model="isExamNo">准考证号</el-checkbox>
					<el-checkbox v-model="isMissExam">缺考标记</el-checkbox>
					<el-checkbox v-model="isOption">客观题</el-checkbox>
				</div>
				<div class="sbjdprogreen">
					识别进度
					<el-progress :percentage="50"></el-progress>
				</div>
				<div class="groupbutton">
					<el-button type="primary" @click="batchsurebc">开始识别</el-button>
					<el-button type="primary" @click="batchgoback">取消</el-button>
				</div>
			</div>
		</div>
		<!-- 强制识别答题卡 -->
		<div class="addExamMain" v-if="mandatoryidentificationishow">
			<div class="addExamContent">
				<h3>强制识别答题卡</h3>
				<p>强制识别后智能批改数据将被强制清空！</p>
				<div class="sbcontentbsl">
					强制识别数量 <span>{{ this.multipleSelection.length }}</span>
				</div>
				<div class="sbjdprogreen">
					识别进度
					<el-progress :percentage="(this.totalNumber / this.multipleSelection.length) * 100"></el-progress>
				</div>
				<div class="groupbutton">
					<el-button type="primary" @click="mandatorysure">强制识别</el-button>
					<el-button type="primary" @click="Mandatorygoback">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { get, post, del, dele, resData } from '../../request/api.js'
import draggable from 'vuedraggable';
import carderrorHead from '../../components/homework/carderrorhead.vue'
import { mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['getScreenWidth']),
		screenWidth() {
			return this.getScreenWidth;
		},
	},
	data() {
		return {
			canvas: null,
			ctx: null,
			isDrawing: false,
			isResizing: false,
			startX: 0,
			startY: 0,
			currentX: 0,
			currentY: 0,
			selectedAreas: [],
			image: null,
			activeAreaIndex: null,
			resizeHandleIndex: null,
			overHandleIndex: null,
			handleSize: 8,
			questionlist: [],
			answerlist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
			examNumber: '',
			studentName: '',
			currentAutoIndex: 0,
			autoLocatedCells: [], // 存储所有符合条件的单元格信息
			scrollContainercontent: null, // 表格滚动容器引用
			addanswerLeft: 0,
			addanswerTop: 0,
			answerishow: false,
			rowindex: 0,
			colindex: 0,
			selected: [], // 存储已选中的答案
			imageUrllist: [{ name: '1' }, { name: '2' }],
			tabindex: 0,
			currentIndex: 1,
			isButtonClicked: false,
			viewerVisible: false, // 控制查看器的显示状态
			viewerIndex: 0, // 当前查看的图片索引
			restartupload: false,
			cardabsore: false,
			multipleSelection: [],
			tableBodyWrapper: null,
			currentPosition: { sIndex: -1, qIndex: -1 },// 当前高亮位置
			numbersl: {},
			batchrecognitionishow: false,
			mandatoryidentificationishow: false,
			isExamNo: true,
			isMissExam: false,
			isOption: false,
			rowpaperId: 0,
			timer: null,
			timer1: null,
			timer2: null,
			timer3: null,
			loadingishow: null,
			loading: false,
			answerIsShow: true,
			position: { x: 24, y: 72 },
			startPos: { x: 0, y: 0 },
			isDragging: false,
			isFullscreen: false, // 当前是否处于全屏状态
			tableheightbox: 0,
			batchNo: '', // 批次号
			serialNo: '',//流水号
			batchNoList: [],
			tablescorll: false
		};
	},
	mounted() {
		// 监听全屏状态变化
		document.onfullscreenchange = this.handleFullscreenChange;
		this.examobjcontent = JSON.parse(sessionStorage.getItem('examInfo'))
		this.tableheightbox = window.innerHeight - 185
		this.selectycbox()
		//this.getdatanum()
		this.batchlistclick()
		this.$nextTick(() => {
			// const container = this.$refs.scrollContainercontent;
			// if (container) {
			// 	container.addEventListener('scroll', this.updatePopupPosition);
			// }
			const container1 = this.$refs.multipleTable.$refs.bodyWrapper;
			if (container1) {
				container1.addEventListener('scroll', this.hidePopupOnScroll);
			}
		});
	},
	methods: {
		hidePopupOnScroll() {
			if (this.answerIsShow) {
				this.showTimuqueren();
			}
			this.answerIsShow = false;
		},
		// 获取第一个错误单元格的索引
		getFirstErrorIndex() {
			for (let rowIndex = 0; rowIndex < this.questionlist.length; rowIndex++) {
				const row = this.questionlist[rowIndex];
				for (let colIndex = 0; colIndex < row.objectiveAnswers.length; colIndex++) {
					if (!row.objectiveAnswers[colIndex].isCheck) {
						return { rowIndex, colIndex };
					}
				}
			}
			return { rowIndex: 0, colIndex: 0 }; // 默认返回第一个单元格
		},
		// 新增滚动位置更新方法
		updatePopupPosition() {
			if (this.answerIsShow) {
				this.showTimuqueren();
			}
		},
		// 批次下拉
		batchlistclick() {
			let obj = {
				examCourseId: this.$route.query.subjectid
			}
			get('/scanpaperexception/batchlist', obj).then(res => {
				if (res.code == 200) {
					this.batchNoList = res.data
				} else {
					this.$message.error(res.message)
				}
			})
		},
		quiteboxclick() {
			this.$router.push(`/studentscore?subjectid=${this.$route.query.subjectid}&examid=${this.$route.query.examid}&examtitle=${this.$route.query.examtitle}&sujectname=${this.$route.query.sujectname}`)
		},
		getBoxhover() {
			if (!this.questionlist || this.questionlist.length === 0
				|| this.questionlist[0].objectiveAnswers.length === 0) {
				console.log("当前未加载到题目信息");
				return;
			}
			const firstError = this.getFirstErrorIndex();
			this.showElement(firstError.rowIndex, firstError.colIndex);
		},
		/**
		 * 显示指定索引的元素
		 * 包含的逻辑：
		 * 1. 设置 this.rowindex 和 this.colindex
		 * 2. 滚动到当前元素 （rowIndex， colIndex）
		 * 3. 弹出题目确认弹窗
		 * 4. 显示答题卡
		 * @param rowIndex 
		 * @param colIndex 
		 */
		showElement(rowIndex, colIndex) {
			// rowIndex 和 colIndex 是要显示的元素的索引
			if (rowIndex < 0 || rowIndex >= this.questionlist.length
				|| colIndex < 0 || colIndex > this.questionlist[rowIndex].objectiveAnswers.length) {
				console.log(`无效的索引 row: ${rowIndex}, col: ${colIndex}`);
				return;
			}

			// 取消上一个元素的选中
			const prevRowIdx = this.rowindex;
			const prevColIdx = this.colindex;
			this.questionlist[prevRowIdx].objectiveAnswers[prevColIdx].answerIsShow = false;

			// 切换到当前元素
			this.rowindex = rowIndex;
			this.colindex = colIndex;
			this.questionlist[rowIndex].objectiveAnswers[colIndex].answerIsShow = true;

			this.scrollToElement(rowIndex, colIndex);

			// 获取考生的答题卡
			const dajuan = this.questionlist[rowIndex];
			// 获取考生的答题卡的答案
			const answers = dajuan.objectiveAnswers;
			// 填充答题卡预览图片
			this.showImage(dajuan.paperImages, answers[colIndex]);
		},
		// 显示上一个元素
		// // 显示上一个元素
		// showPrevious() {
		// 	this.submitsigle(this.rowindex, this.colindex);
		// 	// 向前寻找一个未处理的元素
		// 	let x = this.rowindex;
		// 	let y = this.colindex - 1;
		// 	let answerCount = this.questionlist[0].objectiveAnswers.length;

		// 	if (y < 0) {
		// 		y = 0; // 跳转第一个元素
		// 		// y = answerCount - 1 // 跳转上一个人的最后一个人
		// 		x -= 1; // 跳转上一个人
		// 	}

		// 	if (x < 0) {
		// 		console.log('已经是第一个元素');
		// 	} else {
		// 		this.showElement(x, y);
		// 	}
		// },
		// // 显示下一个元素
		// showNext(isSingleSubmit = true) {
		// 	// 单条提交
		// 	if (isSingleSubmit) {
		// 		this.submitsigle(this.rowindex, this.colindex);
		// 	}
		// 	let x = this.rowindex;
		// 	// 跳转到下一个元素
		// 	let y = this.colindex + 1;
		// 	let answerCount = this.questionlist[0].objectiveAnswers.length;
		// 	let questionCount = this.questionlist.length;

		// 	console.log(x, y);

		// 	for (; x < questionCount; x++) {
		// 		for (; y < answerCount; y++) {
		// 			console.log(x, y, this.questionlist[x].objectiveAnswers[y].isCheck);
		// 			if (!this.questionlist[x].objectiveAnswers[y].isCheck) {
		// 				this.showElement(x, y);
		// 				return;
		// 			}
		// 		}
		// 		y = 0;
		// 	}

		// 	console.log('-----', x, y);

		// 	console.log('已经是最后一个元素');
		// },
		// 显示下一个未处理元素
		async showNext(isSingleSubmit = true) {
			if (isSingleSubmit) {
				await this.submitsigle(this.rowindex, this.colindex);
			}

			let x = this.rowindex;
			let y = this.colindex + 1;
			const answerCount = this.questionlist[0].objectiveAnswers.length;
			const questionCount = this.questionlist.length;

			for (; x < questionCount; x++) {
				for (; y < answerCount; y++) {
					if (!this.questionlist[x].objectiveAnswers[y].isCheck) {
						this.showElement(x, y);
						return;
					}
				}
				y = 0;
			}

			console.log('已经是最后一个元素');
		},

		// 显示上一个未处理元素
		async showPrevious() {
			await this.submitsigle(this.rowindex, this.colindex);

			let x = this.rowindex;
			let y = this.colindex - 1;
			const answerCount = this.questionlist[0].objectiveAnswers.length;

			if (y < 0) {
				x -= 1;
				y = answerCount - 1;
			}

			if (x < 0) {
				console.log('已经是第一个元素');
			} else {
				this.showElement(x, y);
			}
		},

		// 整条提交，跳转到下一个考试的答题卡
		showNextLine() {
			this.submitAll(this.rowindex);

			if (this.rowindex >= (this.questionlist.length - 1)) {
				console.log("已经是最后一行");
				return;
			}

			this.rowindex += 1;
			this.colindex = 0;
			// 切换到下一行的第一个元素
			this.showNext(false);
		},
		handleCellClick(rowindex, colindex) {
			// //console.info('imglist', row);
			console.log(`当前坐标：${rowindex}, ${colindex}`);
			// todo 切换题目到当前点击项
			this.showElement(rowindex, colindex);
		},
		// 滚动到当前单元格
		scrollToElement(rowIdx, colIdx) {
			if (rowIdx < 0 || rowIdx >= this.questionlist.length
				|| colIdx < 0 || colIdx > this.questionlist[rowIdx].objectiveAnswers.length) {
				console.log(`无效的索引 row: ${rowIdx}, col: ${colIdx}`);
				return;
			}

			this.answerIsShow = false;

			// 获取当前单元格的 ref
			const ref_id = `question-${rowIdx}-${colIdx}`;
			const curr_column = this.$refs[ref_id];
			// //console.log(curr_column);
			// 单元格的父级节点
			const currColumnParent = curr_column[0].offsetParent;
			const currOffsetLeft = currColumnParent.offsetLeft;
			const currOffsetTop = currColumnParent.offsetTop;
			const currOffsetHeight = currColumnParent.offsetHeight;
			const currOffsetWidth = currColumnParent.offsetWidth;


			// 获取父级元素的 DOM 节点
			const parentDiv = this.$refs.multipleTable;
			const bodyWrapper = parentDiv.$refs.bodyWrapper;
			// //console.log(parentDiv);
			// 打印 bodyWrapper 可视区域的坐标
			const showAreaWidth = bodyWrapper.offsetWidth;
			const showAreaHeight = bodyWrapper.offsetHeight;
			// 滚动条的高度和宽度
			const scrollHeight = bodyWrapper.scrollHeight;
			const scrollWidth = bodyWrapper.scrollWidth;
			// 滚动条x的位置
			const scrollLeft = bodyWrapper.scrollLeft;
			// 滚动条y的位置
			const scrollTop = bodyWrapper.scrollTop;

			console.log(`父级容器信息：可视区域${showAreaWidth} * ${showAreaHeight};
			滚动条x: ${scrollLeft} / ${scrollWidth};
			滚动条y: ${scrollTop} / ${scrollHeight}`);

			// 计算子元素中心点相对于父容器的水平位置
			const centerX = currOffsetLeft + currOffsetWidth / 2;
			// 计算父容器中心点的水平位置
			const parentCenterX = showAreaWidth / 2;
			// 计算新的水平滚动条位置
			let newScrollLeft = centerX - parentCenterX;
			// 边界检查
			newScrollLeft = Math.max(0, Math.min(newScrollLeft, scrollWidth - showAreaWidth + 15));

			// 计算子元素中心点相对于父容器的垂直位置
			const centerY = currOffsetTop + currOffsetHeight / 2;
			// 计算父容器中心点的垂直位置
			const parentCenterY = showAreaHeight / 2;
			// 计算新的垂直滚动条位置
			let newScrollTop = centerY - parentCenterY;
			// 边界检查
			newScrollTop = Math.max(0, Math.min(newScrollTop, scrollHeight - showAreaHeight + 15));

			console.log('单元格位置:', currOffsetLeft, currOffsetTop);
			console.log('表格容器信息:', showAreaWidth, showAreaHeight);
			console.log('新滚动位置:', newScrollLeft, newScrollTop);

			// 移动到父级元素的中间位置
			bodyWrapper.scrollTo({
				top: newScrollTop,
				left: newScrollLeft
			});

			setTimeout(() => {
				// 此处需要保证滚动操作执行完成
				this.$nextTick(() => {
					// 显示答案确认框
					this.showTimuqueren();
				});
			}, 500);
		},
		showTimuqueren() {
			this.$nextTick(() => {
				const ref_id = `question-${this.rowindex}-${this.colindex}`;
				const cellElement = this.$refs[ref_id][0];
				if (!cellElement) return;

				const tableWrapper = this.$refs.multipleTable.$refs.bodyWrapper;
				if (!tableWrapper) return;

				const answerBox = this.$refs.answerBox;
				if (!answerBox) return;

				// 获取视口尺寸
				const viewportWidth = document.documentElement.clientWidth;
				const viewportHeight = document.documentElement.clientHeight;

				// 获取元素位置（相对于视口）
				const cellRect = cellElement.getBoundingClientRect();
				const tableRect = tableWrapper.getBoundingClientRect();

				// 计算弹窗位置
				let popupLeft = cellRect.left - tableRect.left;
				let popupTop = cellRect.bottom - tableRect.top + 43;

				// 获取弹窗尺寸（确保已渲染）
				const popupWidth = answerBox.offsetWidth || 300; // 默认值防止NaN
				const popupHeight = answerBox.offsetHeight || 200;

				// 边界检查 - 相对于表格容器
				const maxTableLeft = tableRect.width - popupWidth;
				const maxTableTop = tableRect.height - popupHeight;

				// 边界检查 - 相对于视口
				const maxViewportLeft = viewportWidth - popupWidth;
				const maxViewportTop = viewportHeight - popupHeight;

				// 双重边界检查
				popupLeft = Math.max(0, Math.min(popupLeft, maxTableLeft, maxViewportLeft));
				popupTop = Math.max(0, Math.min(popupTop, maxTableTop, maxViewportTop));

				// 设置弹窗位置
				this.addanswerLeft = popupLeft;
				this.addanswerTop = popupTop;
				this.answerIsShow = true;
			});
		},
		// 单个提交 -- 先提交，再移动 
		// submitsigle(rowIdx, colIdx) {
		// 	console.info(rowIdx,'什么')
		// 	console.info(colIdx,'啊啊')
		// 	// //console.info('this.selected',this.questionlist[rowIdx]) 
		// 	// return false
		// 	let obj = {
		// 		paperId: this.questionlist[rowIdx].id,
		// 		paperQuestionId: this.questionlist[rowIdx].objectiveAnswers[colIdx].questionId,
		// 		option: this.selected.length != 0 ? this.selected.join('') : this.questionlist[rowIdx].objectiveAnswers[colIdx].option
		// 	}
		// 	post('/scanpaperexception/submit', obj)
		// 		.then(res => {
		// 			if (res.code == 200) {
		// 				this.selected = []
		// 				// this.questionlist[rowIdx].objectiveAnswers[colIdx-1].answerIsShow = false
		// 				this.questionlist[rowIdx].objectiveAnswers[colIdx].isCheck = res.data
		// 				this.selectedAreas = []
		// 				// this.selectycbox()
		// 				// this.getdatanum()
		// 			} else {
		// 				this.$message({
		// 					type: 'error',
		// 					message: res.message,
		// 					offset: 60
		// 				});
		// 			}

		// 		})
		// },
		// 单个提交 
		submitsigle(rowIdx, colIdx) {
			// //console.info('this.selected',this.questionlist[rowIdx]) 
			// return false
			let obj = {
				paperId: this.questionlist[rowIdx].id,
				paperQuestionId: this.questionlist[rowIdx].objectiveAnswers[colIdx].questionId,
				option: this.selected.length != 0
					? this.selected.join('')
					: (this.questionlist[rowIdx].objectiveAnswers[colIdx].option || "")
			}

			post('/scanpaperexception/submit', obj)
				.then(res => {
					if (res.code == 200) {
						this.selected = []
						// this.questionlist[rowIdx].objectiveAnswers[colIdx-1].answerIsShow = false
						this.questionlist[rowIdx].objectiveAnswers[colIdx].isCheck = res.data
						this.selectedAreas = []
						// this.selectycbox()
						// this.getdatanum()
					} else {
						this.$message({
							type: 'error',
							message: res.message,
							offset: 60
						});
					}

				})
		},
		selectAnswer(answer) {
			// 判断是否已选中  
			const index = this.selected.findIndex(item => item === answer);
			if (index > -1) {
				// 已选中，移除
				this.selected.splice(index, 1);
			} else {
				// 未选中，添加
				this.selected.push(answer);
			}
			this.questionlist[this.rowindex].objectiveAnswers[this.colindex].option = this.selected.join('')
		},
		//整条提交
		submitAll(rowIdx) {
			// todo 整条提交参数处理
			let obj = {
				paperId: this.questionlist[rowIdx].id,
				paperQuestionId: this.questionlist[rowIdx].id,
				option: this.selected.length != 0 ? this.selected.join('') : this.questionlist[rowIdx].objectiveAnswers[this.colindex].option
			}
			post('/scanpaperexception/allsubmit', obj)
				.then(res => {
					// consoel.info(res)
					this.selected = []
					this.questionlist[rowIdx].objectiveAnswers = this.questionlist[rowIdx].objectiveAnswers.map(item => ({
						...item,
						isCheck: false,
						answerIsShow: false
					}));
					this.selectedAreas = []
					this.selectycbox()
					this.getdatanum()
				})
		},
		//关闭弹窗
		closermessage() {
			this.answerIsShow = false
		},
		//刷新
		translatedata() {
			this.selectycbox()
			this.getdatanum()
			this.selectedAreas = []
			this.tabindex = 0
		},
		//强制识别
		mandatoryidentification() {
			this.mandatoryidentificationishow = true
		},
		mandatorysure() {
			if (this.multipleSelection.length > 0) {
				let ids = this.multipleSelection.map(item => item.id);

				// 强制识别提示
				this.$message({
					message: '正在进行批量识别操作，请稍候...',
					type: 'warning',
					offset: 60
				});

				// 循环调用接口
				ids.forEach((id, index) => {
					let obj = {
						paperId: id, // 每次只传一个 id
					};

					get('/scanpaperexception/forceidentify', obj)
						.then(res => {
							if (res.code == 200) {
								// 处理成功逻辑
								this.$message({
									type: 'success',
									message: `批量识别成功！（${index + 1}/${ids.length}）`,
									offset: 60
								});
								this.totalNumber = index + 1
								// 如果所有 ID 都处理完成，调用 yclistbox 方法
								if (index === ids.length - 1) {
									this.timer = setTimeout(() => {
										this.yclistbox();
									}, 500)
									this.$message({
										type: 'success',
										message: '所有批量识别操作已完成！',
										offset: 60
									});
									this.batchrecognitionishow = false;
								}
							} else {
								// 处理失败逻辑
								this.$message({
									message: res.message || `批量识别失败，请检查数据后重试！（${index + 1}/${ids.length}）`,
									type: 'error',
									offset: 60
								});
							}
						})
						.catch(error => {
							// 处理异常
							this.$message({
								message: `批量识别过程中发生错误：${error.message}（${index + 1}/${ids.length}）`,
								type: 'error',
								offset: 60
							});
						});
				});
			} else {
				this.$message({
					type: 'warning',
					message: '没有选中内容，无法进行批量识别操作！',
					offset: 60
				});
			}
		},
		Mandatorygoback() {
			this.mandatoryidentificationishow = false
		},
		// 批量识别
		batchrecognition() {
			this.batchrecognitionishow = true
		},
		batchsurebc() {
			if (this.multipleSelection.length > 0) {
				let ids = this.multipleSelection.map(item => item.id);

				// 强制识别提示
				this.$message({
					type: 'warning',
					message: '正在进行批量识别操作，请稍候...',
					offset: 60
				});

				// 循环调用接口
				ids.forEach((id, index) => {
					let obj = {
						paperId: id, // 每次只传一个 id
						isExamNo: this.isExamNo,
						isMissExam: this.isMissExam,
						isOption: this.isOption
					};

					post('/scanpaperexception/batchidentify', obj)
						.then(res => {
							if (res.code == 200) {
								// 处理成功逻辑
								this.$message({
									type: 'success',
									message: `批量识别成功！（${index + 1}/${ids.length}）`,
									offset: 60
								});
								this.totalNumber = index + 1
								// 如果所有 ID 都处理完成，调用 yclistbox 方法
								if (index === ids.length - 1) {
									this.timer1 = setTimeout(() => {
										this.yclistbox();
									}, 500)
									this.$message({
										type: 'success',
										message: '所有批量识别操作已完成！',
										offset: 60
									});
									this.batchrecognitionishow = false;
								}
							} else {
								// 处理失败逻辑
								this.$message({
									type: 'error',
									message: res.message || `批量识别失败，请检查数据后重试！（${index + 1}/${ids.length}）`,
									offset: 60
								});
							}
						})
						.catch(error => {
							// 处理异常
							this.$message({
								type: 'error',
								message: `批量识别过程中发生错误：${error.message}（${index + 1}/${ids.length}）`,
								offset: 60
							});
						});
				});
			} else {
				this.$message({
					type: 'warning',
					message: '没有选中内容，无法进行批量识别操作！',
					offset: 60
				});
			}
		},
		batchgoback() {
			this.batchrecognitionishow = false
		},
		getdatanum() {
			let obj = {
				examCourseId: this.$route.query.subjectid,
			}
			get('/scanpaperexception/exception', obj)
				.then(res => {
					// //console.info(res)
					if (res.code == 200) {
						this.numbersl = res.data
					} else {
						this.$message.error(res.message);
						this.$message({
							type: 'error',
							message: res.message,
							offset: 60
						});
					}
				})
		},
		handleScroll() {
			const scrollLeft = this.tableBodyWrapper.scrollLeft; // 获取横向滚动的像素值
			console.log('横向滚动像素值：', scrollLeft);
		},
		showViewer(index) {
			// 显示查看器并跳转到指定图片
			this.$viewer.view(index);
		},
		viewerInited(viewer) {
			// 在 viewer 初始化后，可以通过 this.$viewer 访问 viewer 实例
			this.$viewer = viewer;
		},
		//获取答题卡选项异常
		selectycbox() {
			let obj = {
				examCourseId: this.$route.query.subjectid,
				examNo: this.examNumber,
				studentName: this.studentName,
				batchNo: this.batchNo,
				serialNo: this.serialNo == '' ? 0 : this.serialNo
			};
			get('/scanpaperexception/optionexception', obj)
				.then((res) => {
					if (res.code === 200) {
						// 检查数据是否存在
						if (res.data && res.data.length > 0) {
							res.data.forEach((item) => {
								item.objectiveAnswers.forEach((answer) => {
									if (!answer.isCheck) {
										answer.answerIsShow = false; // 添加新属性
									}
								});
							});
							this.questionlist = res.data;
							this.imageUrllist = res.data[0].paperImages;
							// this.multipleSelection = [this.questionlist[0]];
							//  this.$nextTick(() => {
							// 	 this.$refs.multipleTable.toggleRowSelection(this.questionlist[0], true);
							//  });
							this.timer2 = setTimeout(() => {
								this.getBoxhover()//获取所有的错误class
								this.loadImage(res.data[0].paperImages[0].filePath);
							}, 1000);
						} else {
							this.questionlist = []; // 如果数据为空，设置为空数组
							this.imageUrllist = [];
							this.$message({
								type: 'warning',
								message: '当前没有可处理的异常',
								offset: 60
							});
							this.timer3 = setTimeout(() => {
								this.$router.push('/studentscore?subjectid=' + this.$route.query.subjectid + '&examid=' + this.$route.query.examid)
							}, 4000)
						}
					} else {
						this.$message.error(res.message);
					}
				})
				.catch((error) => {
					this.$message({
						type: 'error',
						message: '请求失败，请检查网络连接',
						offset: 60
					});
				});
		},
		/**
		 * 显示答题卡 
		 * @param {Object} imageList paperImages
		 * @param {Object} answer objectiveAnswers[index]
		 */
		showImage(imageList, answer) {
			const imgIndex = answer.page - 1;

			// 更新图片和数据
			this.imageUrllist = imageList;
			// 图片框选区域
			this.selectedAreas = [{ width: answer.w, height: answer.h, x: answer.x, y: answer.y }];
			this.tabindex = imgIndex;
			this.loadImage(imageList[imgIndex].filePath);
		},
		// 加载图片
		loadImage(url) {
			this.loading = true
			this.canvas = this.$refs.canvas;
			this.ctx = this.canvas.getContext('2d');

			this.image = new Image();
			this.image.src = url; // 设置图片路径
			this.image.onload = () => {
				this.loading = false
				// 设置 Canvas 宽高为图片的宽高
				this.canvas.width = this.image.width;
				this.canvas.height = this.image.height;

				// 在 Canvas 上绘制图片
				this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
				this.draw()
			};
			this.image.onerror = () => {
				this.loading = false
				console.error('Failed to load image:', url);
				this.$message({
					type: 'error',
					message: '无法加载图片，请检查图片 URL 是否正确或网络连接是否正常。',
					offset: 60
				});
			};
		},
		getAnswerList(row) {
			// //console.info('row', row)
			if (!row) return [];
			const optionCount = row.optionCount || 0;
			const questionRuleName = row.questionRuleName || '';

			if (optionCount === 2 && questionRuleName === '判断题') {
				return ['T', 'F']; // 判断题
			} else if (optionCount === 3) {
				return ['A', 'B', 'C']; // 3 个选项
			} else if (optionCount === 4) {
				return ['A', 'B', 'C', 'D']; // 4 个选项
			} else if (optionCount === 5) {
				return ['A', 'B', 'C', 'D', 'E']; // 5 个选项
			} else if (optionCount === 6) {
				return ['A', 'B', 'C', 'D', 'E', 'F']; // 6 个选项
			} else if (optionCount === 7) {
				return ['A', 'B', 'C', 'D', 'E', 'F', 'G']; // 7 个选项
			} else if (optionCount === 8) {
				return ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']; // 8 个选项
			} else {
				return []; // 默认返回空数组
			}
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
			if (!val) {
				this.rowpaperId = val[0].id
			}
		},
		draw() {
			this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
			this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
			this.selectedAreas.forEach((area, index) => {
				if (this.$refs.scrollContainer) {
					this.$refs.scrollContainer.scrollLeft = area.x - 220;
					this.$refs.scrollContainer.scrollTop = area.y - 200;
				}
				this.ctx.strokeStyle = index === this.activeAreaIndex ? 'red' : 'red';
				this.ctx.lineWidth = 2;
				this.ctx.fillStyle = 'rgba(0, 0, 0, 0)';
				this.ctx.fillRect(area.x, area.y, area.width, area.height);
				this.ctx.strokeRect(area.x, area.y, area.width, area.height);
			});
			if (this.isDrawing) {
				this.ctx.strokeStyle = 'red';
				this.ctx.lineWidth = 2;
				this.ctx.fillRect(this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY);
				this.ctx.strokeRect(this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY);
			}
		},
		handleRowClick(row, column, enent) {
			this.rowpaperId = row.id
			this.imageUrllist = row.paperImages
			// this.loadImage(row.paperImages[0].filePath)

			// 获取当前选中的行数据
			// const table = this.$refs.multipleTable;
			// const isSelected = table.selection.some(item => item.id === row.id);
			// this.$nextTick(() => {
			//   this.$refs.multipleTable.toggleRowSelection(row, !isSelected);
			// });
		},
		pageimageclick(num) {
			this.tabindex = num
			this.currentImage = this.imageUrllist[num]
			this.loadImage(this.imageUrllist[num].filePath)
		},
		//保存排序
		surepxlist() {
			const result = this.imageUrllist.map((item, index) => {
				return {
					id: item.id,
					page: index + 1
				};
			});
			let obj = {
				paperId: this.rowpaperId,
				paperImages: result
			}
			post('/scanpaperexception/papersort', obj)
				.then(res => {
					// //console.info(res)
					if (res.code == 200) {
						this.yclistbox()
						this.cardabsore()
					} else {
						this.$message({
							type: 'error',
							message: res.message,
							offset: 60
						});
					}
				})
		},
		// 旋转
		roateclick() {
			this.loadingishow = this.$loading({
				lock: true,
				text: '旋转中...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			let obj = {
				paperId: this.rowpaperId,
				angleInDegrees: 90
			}
			get('/scanpaperexception/rotate', obj)
				.then(res => {
					// //console.info(res)
					if (res.code == 200) {
						this.loadingishow.close();
						// 移除旧的时间戳
						const filePath = this.imageUrllist[this.tabindex].filePath.replace(/\?timesDate=\d+/, '');
						// 添加新的时间戳
						this.imageUrllist[this.tabindex].filePath = `${filePath}?timesDate=${new Date().getTime()}`;
						this.loadImage(this.imageUrllist[this.tabindex].filePath)
						this.selectycbox()
						this.getdatanum()
						// 定义异常信息映射
						const errorMessages = {
							4000: "单选多个答案",
							4100: "缺少选项"
							// 可以根据需要继续扩展
						};

						// 定义状态码映射
						const statusCodes = {
							success: "识别成功",
							failure: (matchedValues) => {
								// 只处理 valuesToCheck 中的值
								const messages = matchedValues
									.filter(value => errorMessages[value]) // 确保只处理有定义的值
									.map(value => errorMessages[value]);
								return `（包含以下异常：\n${messages.join("\n")})`;
							}
						};

						// 判断 res.data 是否包含 6000
						const has6000 = res.data.includes(6000);

						// 如果没有 6000 但包含其他值，直接提示“打分异常”
						if (!has6000 && res.data.length > 0) {
							this.$message.error("打分异常"); // 直接提示打分异常
						} else if (has6000) {
							// 如果有 6000，显示匹配的异常信息
							const matchedValues = res.data.filter(value => Object.keys(errorMessages).includes(String(value)));
							if (matchedValues.length > 0) {
								this.$message({
									type: 'error',
									message: '打分异常',
									offset: 60
								});
							} else {
								this.$message({
									type: 'success',
									message: statusCodes.success,
									offset: 60
								});
							}
						} else {
							this.$message({
								type: 'success',
								message: statusCodes.success,
								offset: 60
							});
						}
					} else {
						this.loadingishow.close();
						this.$message({
							type: 'success',
							message: res.message,
							offset: 60
						});
					}
				})
		},
		searchboxinfo() {
			this.selectycbox()
		},
		//批量删除
		dacdeletmore() {
			// //console.info(this.multipleSelection.length)
			if (this.multipleSelection.length > 0) {
				let ids = this.multipleSelection.map(item => item.id)
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					post('/scanpaperexception/delexception', ids)
						.then(res => {
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!',
									offset: 60
								});
								this.selectycbox()
								this.getdatanum()
							} else {
								this.$message({
									type: 'error',
									message: res.message,
									offset: 60
								});
							}
						})
						.catch(error => {
							this.$message({
								type: 'error',
								message: res.message,
								offset: 60
							});
						})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
						offset: 60
					});
				});
			} else {
				this.$message({
					type: 'warning',
					message: '请先选择要删除的内容',
					offset: 60
				});
			}
		},
		startDrag(event) {
			event = event.type === 'touchstart' ? event.touches[0] : event;

			this.startPos = {
				x: event.clientX - this.position.x,
				y: event.clientY - this.position.y,
			};

			this.isDragging = true;

			// 添加事件监听
			document.addEventListener('mousemove', this.onDrag);
			document.addEventListener('mouseup', this.stopDrag);
			document.addEventListener('touchmove', this.onDrag);
			document.addEventListener('touchend', this.stopDrag);
		},
		onDrag(event) {
			if (!this.isDragging) return;
			event.preventDefault();

			event = event.type === 'touchmove' ? event.touches[0] : event;

			this.position = {
				x: event.clientX - this.startPos.x,
				y: event.clientY - this.startPos.y,
			};
		},
		stopDrag() {
			this.isDragging = false;

			// 移除事件监听
			document.removeEventListener('mousemove', this.onDrag);
			document.removeEventListener('mouseup', this.stopDrag);
			document.removeEventListener('touchmove', this.onDrag);
			document.removeEventListener('touchend', this.stopDrag);
		},
		// 切换全屏
		toggleFullscreen() {
			if (!document.fullscreenEnabled) {
				alert("您的浏览器不支持全屏功能！");
				return;
			}

			if (this.isFullscreen) {
				// 退出全屏
				document.exitFullscreen();
				this.$refs.fullscreenElement.style.overflow = 'auto';
			} else {
				// 进入全屏
				this.$refs.fullscreenElement.requestFullscreen();
				this.$refs.fullscreenElement.style.overflow = 'auto';
			}
		},
		// 处理全屏状态变化
		handleFullscreenChange() {
			this.isFullscreen = !!document.fullscreenElement;
		}
	},
	components: {
		draggable, carderrorHead
	},
	beforeDestroy() {
		// 清除定时器
		clearTimeout(this.timer);
		clearTimeout(this.timer1);
		clearTimeout(this.timer2);
		clearTimeout(this.timer3);
		if (this.loadingishow) {
			this.loadingishow.close();
		}
		// 组件销毁时移除监听
		this.stopDrag();
		// const container = this.$refs.scrollContainercontent;
		// if (container) {
		// 	container.removeEventListener('scroll', this.updatePopupPosition);
		// }
		const container1 = this.$refs.multipleTable.$refs.bodyWrapper;
		if (container1) {
			container1.removeEventListener('scroll', this.hidePopupOnScroll);
		}
	},
	beforeRouteLeave(to, from, next) {
		// 清除定时器
		clearTimeout(this.timer);
		clearTimeout(this.timer1);
		clearTimeout(this.timer2);
		clearTimeout(this.timer3);
		if (this.loadingishow) {
			this.loadingishow.close(); // 路由离开时关闭 Loading
		}
		next();
	},
};
</script>

<style scoped>
canvas {}

.header {
	padding: 0 40px;
	height: 48px;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	background: #2379F6;
	font-size: 16px;
}

.header h3 {
	font-weight: normal;
	font-size: 16px;
}

.header p {
	display: flex;
}

.header p b {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height: 32px;
	cursor: pointer;
	margin-right: 14px;
}

.header p b img {
	width: 16px;
	margin-right: 8px;
}

.header p em {
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color: #2379F6;
	text-align: center;
	line-height: 32px;
	cursor: pointer
}

.tabNav {
	min-width: 100%;
	padding: 0 40px;
	height: 54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 24px 0 10px;
	background: #fff;
}

.tabNav ul {
	display: flex;
	align-items: center;
	font-size: 14px;
}

.tabNav ul li {
	padding: 0 20px;
	cursor: pointer;
	line-height: 38px;
	color: #557292;
	position: relative
}

.tabNav ul li:hover,
.tabNav ul li.hover {
	color: #2A303B;
}

.tabNav ul li:hover::after,
.tabNav ul li.hover::after {
	content: '';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0
}

.tabNav span {
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height: 34px;
	cursor: pointer;
}

/* 上传 */
.uploadMarks {
	box-sizing: border-box;
	background: #F4F7FD;
	width: 100vw;
	height: calc(100vh - 49px);
	position: relative;
}

.smcsbutton {
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border: none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding: 0;
	left: 24px;
	top: 24px;
}

.boxcenter {
	display: flex;
	justify-content: space-between;
}

.uploadcardInfo {
	width: 80%;
	height: calc(100vh - 49px);
	background: #fff;
	position: relative;
	box-shadow: 0 4px 16px 0 #5572921a;
	overflow: auto;
	position: relative;
}

.uploadcardInfo>>>.el-table {
	height: calc(100vh - 190px) !important;
}

.examboxbutton {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 0 15px;
	height: 54px;
	background: #E8F0FA;
	position: absolute;
	left: 0;
	bottom: 0;
}

.examboxbutton>>>.el-button {
	width: 124px;
	height: 34px;
	border-radius: 10px;
	padding: 0;
	margin: 0;
	font-size: 12px;
	border: 1px solid #295CFF;
	color: #295CFF;
	background: none;
}

.examboxbutton>>>.el-button:first-child {
	background: #295CFF;
	border: 1px solid #295CFF;
	color: #fff;
}

.examboxbutton>>>.el-button:nth-child(2) {
	margin: 0 8px;
}

.examboxbutton1 {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding: 0 15px;
	height: 54px;
	background: #E8F0FA;
	position: absolute;
	left: 0;
	bottom: 0;
	justify-content: center;
}

.examboxbutton1>>>.el-button {
	width: 124px;
	height: 34px;
	border-radius: 10px;
	padding: 0;
	margin: 0;
	font-size: 12px;
	border: 1px solid #295CFF;
	color: #295CFF;
	background: none;
}

.examboxbutton1>>>.el-button:first-child {
	background: #295CFF;
	border: 1px solid #295CFF;
	color: #fff;
}

.examboxbutton1>>>.el-button:nth-child(2) {
	margin: 0 8px;
}

.qtbuttonset {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 14px;
}

.qtbuttonset em {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #fff;
	text-align: center;
	line-height: 34px;
	margin: 8px;
}

.qtbuttonset em:last-child {
	width: 124px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color: #295CFF;
}

.uploadcardInfo h3 {
	line-height: 67px;
	border-bottom: solid 1px #D8E4F0;
	padding: 0 24px;
	color: #2A303B;
	font-weight: normal;
	font-size: 18px;
}

.uploaddiv {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.uploaddivattention {
	font-size: 14px;
	color: #B3B8C2;
}

.cropperBox {
	height: calc(100vh - 49px);
	display: flex;
}

.cropperImageset {
	width: calc(100% - 562px);
	height: calc(100vh - 49px);
	overflow: auto;
	position: relative
}

.routate {
	position: absolute;
	left: 50px;
	top: 5px;
	background: #fff;
	height: 60px;
	display: flex;
	align-items: center;
	padding: 0 10px 0 0;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	font-size: 14px;
	color: #557292;
	border-radius: 10px;
	z-index: 10
}

.routate>>>.el-select,
.routate>>>.el-input {
	width: 150px;
}

.routate>>>.el-select {
	margin-right: 10px;
}

.routate>>>.el-input {
	margin-left: 10px;
	margin-right: 10px;
}

.routate>>>.el-button {
	border-radius: 10px;
	height: 35px;
	width: 55px;
	padding: 0;
	margin-left: 10px
}

.routate>>>.el-input__inner {
	border-radius: 10px;
	height: 35px;
}

.breadBox>>>.el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__inner.is-link {
	font-weight: normal
}

.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox>>>.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
	font-weight: bold
}

.routerlistbox {
	width: 224px;
	height: 30px;
	background: #295cff0f;
	border: 1px solid #FFFFFF;
	border-radius: 4px;
	display: flex;
	align-items: center
}

.routerlistbox a {
	flex: 1;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 14px;
	color: #fff;
}

.routerlistbox a.hover {
	background: #fff;
	color: #2379F6
}

.uploadcardInfo h3 {
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	font-size: 18px;
	color: #2A303B;
	align-items: center;
	border-bottom: solid 1px #D8E4F0
}

.uploadcardInfo h3 .el-button {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 34px;
	padding: 0;
	border: none;
}

.uploadcardInfo ul {
	margin-top: 24px;
}

.uploadcardInfo ul li {
	display: flex;
	align-items: center;
	border-top: solid 1px #D8E4F0;
	border-left: solid 1px #D8E4F0;
	height: 40px;
}

.uploadcardInfo ul li span {
	display: block;
	border-bottom: solid 1px #D8E4F0;
	border-right: solid 1px #D8E4F0;
	height: 40px;
	width: 80px;
	text-align: center;
	font-size: 14px;
	line-height: 40px;
	color: #2A303B;
}

.uploadcardInfo ul li span.hover {
	background: #ec555a33;
	border: 1px solid #EC555A;
	cursor: pointer;
}

.answerbox {
	width: auto;
	height: 138px;
	background: #FFFFFF;
	box-shadow: 0 2px 6px 0 rgba(85, 114, 146, 0.1);
	border-radius: 10px;
	padding: 0 20px;
	position: absolute;
	z-index: 1000;
	/* 确保弹框在最上层 */
}

.answerbox h4 {
	font-size: 14px;
	padding-top: 14px;
}

.answerbox p {
	display: flex;
	padding-top: 8px;
}

.answerbox p i {
	width: 30px;
	height: 34px;
	background: #295cff1a;
	border: 1px solid #295cff1a;
	border-radius: 10px;
	line-height: 34px;
	text-align: center;
	font-size: 14px;
	color: #295CFF;
	margin-right: 10px;
	font-style: normal;
	cursor: pointer;
}

.answerbox div {
	display: flex;
	justify-content: right;
	align-items: center;
	margin-top: 10px;
}

.answerbox div span {
	display: inline-block;
	width: 62px;
	height: 34px;
	border: 1px solid #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height: 34px;
	margin-right: 14px;
	cursor: pointer;
}

.answerbox div b {
	width: 76px !important;
	height: 34px;
	background: #295CFF !important;
	border: 1px solid #295cff1a;
	border-radius: 10px;
	font-size: 14px;
	color: #fff !important;
	text-align: center;
	line-height: 34px;
	cursor: pointer;
}

.yclbtitle {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
}

.yclbtitleLeft {
	display: flex;
}

.yclbtitleRight {
	display: flex;
}

.yclbtitleLeft>>>.el-select {
	margin-right: 8px;
}

.yclbtitleLeft>>>.el-input__inner {
	width: 126px;
	height: 34px;
	border: 1px solid #D8E4F0;
	border-radius: 10px;
	color: #2A303B;
	font-size: 14px;
}

.yclbtitleLeft>>>.el-input__icon {
	line-height: 34px;
}

.yclbtitleLeft>>>.el-button {
	width: 80px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	border: none;
	line-height: 34px;
	color: #fff;
	padding: 0 20px
}

.yclbtitleRight>>>.el-button {
	width: 80px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	border: none;
	line-height: 34px;
	color: #fff;
	padding: 0
}

.yclbtitleRight>>>.el-button:nth-child(2) {
	background: #EC555A;
}

.custom-table {
	width: 100%;
	border: 1px solid rgba(216, 228, 240, 0.34);
	border-radius: 10px;
	border-right: none;
	border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table>>>.el-table {
	border-collapse: collapse;
	/* 关闭默认的边框合并模式 */
	border-spacing: 0 !important;
	/* 强制重置间距 */
}

.custom-table>>>.el-table__header-wrapper th {
	background-color: #E8F0FA;
	height: 42px;
	padding: 0;
	text-align: center;
	font-weight: normal
}

.custom-table>>>.el-table__row td {
	height: 42px;
	padding: 0;
	text-align: center;
	border-bottom: solid 1px rgba(216, 228, 240, 0.34);
	border-right: solid 1px rgba(216, 228, 240, 0.34);
	border-collapse: collapse;
	/* 关闭默认的边框合并模式 */
	border-spacing: 0 !important;
	/* 强制重置间距 */
	font-size: 14px;
}

.custom-table>>>.el-table__row td b {
	display: block;
	height: 36px;
	width: 100px;
	text-align: center;
	font-size: 14px;
	line-height: 36px;
	color: #2A303B;
}

.custom-table>>>.el-table__row td b.hover {
	border: 1px solid #EC555A;
	cursor: pointer;
}

.boxihover {
	border: 1px solid #EC555A;
	cursor: pointer;
}

.custom-table>>>.el-input {
	height: 35px;
}

.custom-table>>>.el-input__inner {
	background: rgba(236, 85, 90, 0.2);
	;
	padding: 0;
	text-align: center;
	border: none;
	height: 36px;
	width: 101%
}

.el-table .warning-row {
	background: #ffffff;
}

.el-table .success-row {
	background: #D8E4F0;
}

.el-table .cell {
	padding: 0 !important;
}

.custom-table>>>.el-table__row td div.cell {
	padding: 0 !important;
}

.cardczpk {
	box-sizing: border-box;
	width: 174px;
	height: 90px;
	background: #FFFFFF;
	box-shadow: 0 4px 16px 0 #5572921a;
	border-radius: 10px;
	position: fixed;
	left: 24px;
	top: 72px;
	padding: 14px;
	cursor: move;
}

.cardczpk span {
	font-size: 14px;
	color: #2A303B;
}

.cardczpk div {
	display: flex;
	align-items: center;
}

.cardczpk div i,
.cardczpk div b {
	box-sizing: border-box;
	font-style: normal;
	width: 66px;
	height: 34px;
	background: #295cff1a;
	border: 1px solid #295cff1a;
	border-radius: 10px;
	font-size: 14px;
	color: #295CFF;
	line-height: 34px;
	padding-left: 10px;
	cursor: pointer;
	margin-top: 5px;
}

.cardczpk div i {
	background: url(../../assets/image/school/roate.png) no-repeat 43px center;
	background-size: 13px 14px
}

.cardczpk div b {
	margin-left: 14px;
	background: url(../../assets/image/school/px.png) no-repeat 43px center;
	background-size: 13px 14px
}

.pagesetfixed {
	position: fixed;
	left: 25px;
	bottom: 25px;
	display: flex;
	align-items: center;
	width: auto;
	height: 43px;
	border-radius: 5px;
	background: #FFFFFF;
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
	padding-left: 10px;
}

.pagesetfixed li {
	width: 25px;
	height: 25px;
	border-radius: 3px;
	opacity: 1;
	/* Brand 品牌/Brand1-Light */
	background: #F2F3FF;
	line-height: 25px;
	font-size: 14px;
	color: #366EF4;
	text-align: center;
	margin-right: 10px;
	cursor: pointer;
}

.pagesetfixed li.hover {
	background: #366EF4;
	color: #fff;
}

.uploadcadContent {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	left: 0;
	top: 0;
	z-index: 10000;
}

.uploadcad {
	background: #FFFFFF;
	box-shadow: 0 4px 16px 0 #5572921a;
	border-radius: 10px;
	padding: 25px 0 25px 25px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 875px;
	max-height: 500px;
}

.uploadcad ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.uploadcad ul li {
	width: 200px;
	height: 140px;
	background: #33333d;
	margin-right: 25px;
	position: relative
}

.uploadcad ul li img {
	width: 100%;
	border: 1px solid #295cff80;
}

.uploadcad ul li div {
	font-size: 12px;
	text-align: center;
}

.uploadcad ul li div span {
	padding-top: 12px;
	color: #295CFF;
	cursor: pointer;
}

.uploadcad h3 {
	font-weight: normal;
	font-size: 18px;
	margin-bottom: 15px;
}

.uploadcad ul li p {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.uploadcad ul li em {
	width: 52px;
	height: 24px;
	background: #ffffff;
	border-radius: 12px;
	font-size: 16px;
	color: #295CFF;
	text-align: justify;
	line-height: 24px;
	text-align: center;
	font-style: normal;
	cursor: pointer;
}

.buttonreupload {
	margin-top: 50px;
}

.buttonreupload button,
.buttonreupload b {
	display: inline-block;
	width: 124px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid #295CFF;
	text-align: center;
	line-height: 34px;
	font-size: 14px;
	cursor: pointer;
}

.buttonreupload button {
	background: #295CFF;
	color: #fff;
	margin-right: 24px;
}

.buttonreupload b {
	color: #295CFF;
	background: #F2F6FB;
}

.boxsetdelecte {
	position: relative;
}

.boxsetdelecte span {
	position: absolute;
	left: -24px;
	top: 24px;
}

.buttonboxedit {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 5px;
	width: 200px;
	height: 140px;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: -12px;
	top: 35px;
}

.buttonboxedit i {
	width: 52px;
	height: 24px;
	background: #fff;
	border-radius: 12px;
	font-size: 16px;
	color: #295CFF;
	text-align: justify;
	line-height: 24px;
	text-align: center;
	font-style: normal;
	cursor: pointer;
}

.boxsetdelecte b {
	display: block;
	text-align: center;
	font-size: 20px;
	padding-bottom: 6px;
}

.imgmove span {
	display: flex;
	align-items: center;
	margin: 0 13px;
}

.imgmove span div {
	margin: 0 13px;
}

.addExamMain {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	left: 0;
	top: 0;
	z-index: 100;
}

.addExamContent {
	width: 584px;
	height: auto;
	background: #FFFFFF;
	box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
	border-radius: 10px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	box-sizing: border-box;
	padding: 30px;
}

.addExamContent h3 {
	font-size: 18px;
	padding-bottom: 10px;
}

.addExamContent p {
	color: red;
	font-size: 14px;
}

.sbcontentbsl {
	display: flex;
	align-items: center;
	padding: 20px 0;
	color: #333;
	font-size: 14px;
}

.sbcontentbsl>>>.el-checkbox {
	color: #333;
}

.sbcontentbsl span {
	width: 200px;
	height: 35px;
	background: #F7F8FA;
	border-radius: 4px;
	padding-left: 15px;
	font-size: 14px;
	color: #86909C;
	line-height: 35px;
	margin-left: 15px;
}

.sbjdprogreen {
	font-size: 14px;
}

.groupbutton {
	display: flex;
	align-items: center;
	padding-top: 20px;
}

.groupbutton>>>.el-button {
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	padding: 0;
}

.groupbutton>>>.el-button:last-child {
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color: #295CFF;
	margin-left: 24px;
}
</style>